<template>
  <div class="container">
    <div class="head-bar" :class="'color--' + order.orderStatus">
      <!-- 订单状态 -->
      <div :class="{'font-color-6': order.orderStatus === -1 || order.orderStatus === -2}">{{ statusTitle[order.orderStatus] }}</div>
    </div>
    <div class="user-bar mar-t-7">
      <div class="flex flex-between pad-15 border-b" v-if="order.orderStatus > 1 && traces.length > 0" @click="$pt.navigateTo({ url: '/pages/personal/order/express/main?orderId=' + order.orderId })">
        <div class="v-align-c">
          <div class="width-24 height-20"><img v-if="fileSpace" :src="fileSpace + '/images/w-icon-express.png'" class="width-24 height-20"/></div>
          <div class="mar-l-20">
            <div class="width-244 line-2 express-line">{{traces[0].AcceptStation}}</div>
            <div class="font-12 font-color-9">{{traces[0].AcceptTime}}</div>
          </div>
        </div>
        <div class="icon-box">
          <icon class="iconfont icon-arrow-right font-15"></icon>
        </div>
      </div>
      <div class="flex flex-between pad-15">
        <div class="width-24 height-20">
          <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-address.png'" class="mar-l-4 width-16 height-20"/>
        </div>
        <div class="mar-l-20 flex-item">
          <div class="flex flex-between">
            <div>{{order.customerNickname}}<span class="mar-l-10">{{order.customerPhone}}</span></div>
            <div class="copy-btn address-copy" @click="$pt.setClipboardData({data: order.customerFullAddress})">复制</div>
          </div>
          <div class="line-2 width-244 add-height">{{order.customerFullAddress}}</div>
        </div>
      </div>
    </div>
    <div class="mar-t-10 main">
      <div class="order-item">
        <div v-for="(skuList, index) in goodsList" :key="index">
          <div class="flex pad-l-15 pad-r-15 pad-t-13.5 pad-b-13.5">
            <img class="width-79 radius-5 height-79" v-if="skuList[0].goodsImageUrl" :src="skuList[0].goodsImageUrl" alt="">
            <div class="flex-item mar-l-12.5">
              <div class="line-2 height-38 mar-t-5 ">{{skuList[0].goodsTitle}}</div>
              <div v-if="skuList[0].afterSaleStatus===0 || skuList[0].afterSaleStatus===1 || skuList[0].afterSaleStatus===2" @click="linkToDetail(skuList[0])" class="refund-color font-13 mar-t-5">退款中</div>
                                         <!--  退款关闭: -3、4、3（数量全退完）
              退款：-2、-1、3(数量未退完)、''
              退款中：0、1、2 -->
              <!-- <div class="refund-status" v-if="order.orderStatus !== -2 && order.orderStatus !== -1 && order.orderStatus !== 0 && order.orderStatus !== 1 && order.orderStatus !== 4">
                <div class="refund-btn" v-if="skuList[0].afterSaleStatus===0 || skuList[0].afterSaleStatus===1 || skuList[0].afterSaleStatus===2" @click="linkToDetail(skuList[0])">退款中</div>
                <div class="refund-text" v-else-if="skuList[0].afterSaleStatus===-3 || skuList[0].afterSaleStatus===4 || (skuList[0].afterSaleStatus===3 && (skuList[0].afterSaleGoodsNum===skuList[0].goodsNum))">退款关闭</div>
                <div class="refund-btn" v-else-if="skuList[0].afterSaleStatus===-2 || skuList[0].afterSaleStatus===-1 || !skuList[0].afterSaleStatus || (skuList[0].afterSaleStatus===3 && (skuList[0].afterSaleGoodsNum<skuList[0].goodsNum))" @click="linkToApply(skuList[0])">退款</div>
              </div> -->
            </div>
          </div>
          <div class="pad-l-15 pad-r-15">
            <!-- sku循环位置 -->
            <div v-for="(sku, skuIndex) in skuList" :key="skuIndex" class="sku-block">
              <div class="flex flex-between pad-t-6 pad-b-6 pad-l-10 pad-r-15 sku-row">
                <div class="font-12 font-color-6">
                  <div class="flex sku-detail" v-if="sku.skuDetail">
                    <div>规格：</div>
                    <div class="width-200 line-1">{{sku.skuDetail}}</div>
                  </div>
                  <div>￥{{sku.goodsPrice}}<span v-if="sku.unit">/{{sku.unit}}</span></div>
                  <div v-if="sku.taxAmount && (sku.taxAmount * 1 > 0)">税费：￥{{ sku.taxAmount }}</div>
                </div>
                <div>×{{sku.goodsNum}}</div>
              </div>
              <!--  退款关闭: -3、4、3（数量全退完）
                    退款：-2、-1、3(数量未退完)、''
                    退款中：0、1、2 -->
              <div class="refund-status" v-if="order.orderStatus !== -2 && order.orderStatus !== -1 && order.orderStatus !== 0 && order.orderStatus !== 1 && order.orderStatus !== 4">
                <div class="refund-btn" v-if="sku.afterSaleStatus===0 || sku.afterSaleStatus===1 || sku.afterSaleStatus===2" @click="linkToDetail(sku)">退款中</div>
                <div class="refund-text" v-else-if="sku.afterSaleStatus===-3 || sku.afterSaleStatus===4 || (sku.afterSaleStatus===3 && (sku.afterSaleGoodsNum===sku.goodsNum))">退款关闭</div>
                <div class="refund-btn" v-else-if="sku.afterSaleStatus===-2 || sku.afterSaleStatus===-1 || !sku.afterSaleStatus || (sku.afterSaleStatus===3 && (sku.afterSaleGoodsNum<sku.goodsNum))" @click="linkToApply(sku)">退款</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="count-bar mar-t-10 pad-l-15 pad-r-15">
      <div class="count-row flex flex-between pad-r-10">
        <span>商品小计</span>
        <span>￥{{order.goodsAmount}}</span>
      </div>
      <div class="count-row flex flex-between pad-r-10">
        <span>运费</span>
        <span>￥{{order.freight}}</span>
      </div>
      <div v-if="order.taxAmount && (order.taxAmount * 1 > 0)" class="count-row flex flex-between pad-r-10">
        <span>税费</span>
        <span>￥{{order.taxAmount}}</span>
      </div>
      <div class="count-row flex flex-between pad-r-10">
        <span>实付款</span>
        <span class="color-r">￥{{order.actualPrice}}</span>
      </div>
    </div>
    <div class="order-info font-color-9 font-12 mar-t-10">
      <div class="pad-t-14 pos-rel">
        <div>
          <span class="width-75 text-justify">订单编号：</span>
          <span class="font-color">{{order.orderNo}}</span>
        </div>
        <div class="copy-btn" @click="$pt.setClipboardData({data: order.orderNo})">复制</div>
      </div>
      <div class="pad-t-14">
        <span class="width-75 text-justify">下单时间：</span>
        <span class="font-color">{{order.createTime}}</span>
      </div>
      <div class="pad-t-14">
        <span class="width-75 text-justify">支付时间：</span>
        <span class="font-color">{{order.payTime}}</span>
      </div>
      <div class="pad-t-14">
        <span class="width-75 text-justify">订单状态：</span>
        <span class="color-r">{{ statusTitle[order.orderStatus] }}</span>
      </div>
      <div class="pad-t-14">
        <span class="width-75 text-justify">收货时间：</span>
        <span class="font-color">{{order.receivedTime}}</span>
      </div>
    </div>
    <div class="mark-bar mar-t-10 flex pad-l-15 pad-r-15 pad-t-6 pad-b-8">
      <div class="font-color-9">买家留言：</div>
      <div class="flex-item">{{order.customerComment}}</div>
    </div>
    <div class="height-59"></div>
    <div class="fixed-foot">
      <div class="paystatus" v-if="order.orderStatus === 0">
        <div class="flex-item font-12 font-color-6 mar-r-14">
          <div>合计：<span class="color-r">￥{{order.actualPrice}}</span></div>
          <div>共{{goodsList.length}}种{{order.goodsNum}}件</div>
        </div>
        <div class="pay-btn" @click="payOrder">
          确认支付
        </div>
      </div>
      <div class="btnbar pad-r-15" v-else>
        <div class="btnbar-default btn" @click="$pt.makePhoneCall({phoneNumber: order.enterprise.phone})">联系商家</div>
        <div class="btnbar-default btn" v-if="order.orderStatus === 0 || (order.crossBorderOrderType !== 2 && order.orderStatus === 1 && order.cancelFlag === 0) || (order.crossBorderOrderType === 2 && order.orderStatus === 1 && ((order.warehouseCustomsStatus === 4 || order.paymentOrderCustomsStatus === 7) || (order.warehouseCustomsStatus === 1 && order.paymentOrderCustomsStatus === 1)) )" @click="cancelOrder(order)">取消订单</div>
        <div class="btnbar-pay btn" v-if="order.orderStatus === 2" @click="doReceiveGoods(order)">确认收货</div>
      </div>
    </div>
  </div>
</template>
<script>
// 退款关闭: 系统自动关闭、已关闭、已完成(数量全退完)
// 退款：顾客确认收货、已拒绝、已完成(数量未退完)、无售后状态
// 退款中：待审核、待退货、退款中

// 退款关闭: -3、4、3（数量全退完）
// 退款：-2、-1、3(数量未退完)、''
// 退款中：0、1、2
import { getProjectOrder } from '@/api/distribution'
import { doReceiveGoods, checkCancelPaidOrder } from '@/api/personal'
import { queryExpress } from '@/api/common'
import { payOrder } from '@/api/shop'
export default {
  data() {
    return {
      statusTitle: {
        '0': '待付款',
        '1': '待发货',
        '2': '待收货',
        '20': '待收货',
        '3': '已收货',
        '4': '已完成',
        '-1': '已取消',
        '-2': '已取消'
      },
      submitStatus: false,
      traces: [],
      order: {},
      orderId: '',
      goodsList: []
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.orderId = this.getCurrentPage().query.orderId
    this.submitStatus = false
    this.pageinit()
    this.queryExpress()
  },
  methods: {
    pageinit() {
      this.$pt.showLoading()
      getProjectOrder(this.orderId).then(response => {
        this.$pt.hideLoading()
        if (response.isError) return
        this.order = response.data
        const goodsMap = {}
        this.order.orderGoodsList.forEach(orderGoods => {
          let skuList = goodsMap[orderGoods.goodsId]
          if (!skuList) {
            skuList = []
          }
          skuList.push(orderGoods)
          goodsMap[orderGoods.goodsId] = skuList
        })
        this.goodsList = []
        for (let key in goodsMap) {
          this.goodsList.push(goodsMap[key])
        }
        // console.log(this.goodsList)
      })
    },
    queryExpress() {
      const orderId = this.getCurrentPage().query.orderId
      if (!orderId) {
        return
      }
      queryExpress(orderId, 2).then((response) => {
        if (response.isError) return
        if (response.code === 101) {
          // this.stateText = response.data.stateText
          // this.expressName = response.data.expressName
          // this.trackingNo = response.data.trackingNo
          this.traces = response.data.Traces || response.data.traces
          // this.steps = this.traces.map(item => {
          //   return { text: item.AcceptStation, desc: item.AcceptTime }
          // })
        }
      }).catch(() => {
      })
    },
    cancelOrder(item) {
      // 取消订单事件
      // 订单里面都没有发货才可以取消订单，到订单取消页面
      // 否则提示联系卖家处理
      checkCancelPaidOrder({orderId: item.orderId}).then(response => {
        if (response.isError) return
        this.$pt.navigateTo({url: `/pages/personal/order/cancel-order/main?memberId=${item.memberId}&orderId=${item.orderId}`})
      })
    },
    doReceiveGoods(order) {
      // 确认收货
      const that = this
      this.$pt.showModal({
        content: '是否确认收货？',
        success(res) {
          if (res.confirm) {
            doReceiveGoods({ memberId: order.memberId, orderId: order.orderId }).then(response => {
              if (response.isError) return
              const data = response.data
              const goodsNum = order.orderGoodsList.length
              const params = 'orderId=' + order.orderId + '&goodsNum=' + goodsNum + '&appName=' + data.appName + '&appId=' + data.appId + '&receivedTime=' + data.receivedTime
              that.$pt.navigateTo({ url: '/pages/personal/order/confirm-receipt/main?' + params })
            })
          }
        }
      })
    },
    payOrder() {
      if (this.submitStatus) {
        // 防重复提交
        return
      }
      if (this.order.payType === 0) {
        this.$pt.navigateTo({url: `/pages/shop/counter/main?orderId=${this.orderId}`})
        return
      }
      if (this.order.payType === 5) {
        this.$pt.navigateTo({url: `/pages/shop/counter/offline-payments/main?orderId=${this.orderId}`})
        return
      }
      if (this.order.payType === 1) {
        this.submitStatus = true
        payOrder(this.orderId).then((response) => {
          if (response.isError) {
            this.submitStatus = false
            return
          }
          const that = this
          const payParams = response.data
          that.$pt.requestPayment({
            'timeStamp': payParams.timeStamp,
            'nonceStr': payParams.nonceStr,
            'package': payParams.package,
            'signType': payParams.signType,
            'paySign': payParams.paySign,
            'success': function(res) {
              that.$pt.redirectTo({url: '/pages/shop/result/main?successFlag=1&price=' + that.order.actualPrice + '&orderId=' + that.orderId + '&resType=30'})
              // that.$pt.redirectTo({ url: '/pages/shop/result/main?successFlag=1&price=' + payParams.price })
              // that.$pt.redirectTo({url: '/pages/personal/cancellation-desk/customer-details/main?orderId=' + payParams.orderId})
              that.submitStatus = false
            },
            'fail': function(res) {
              that.$pt.redirectTo({url: '/pages/shop/result/main?successFlag=0&price=' + that.order.actualPrice + '&orderId=' + that.orderId + '&resType=30'})
            }
          })
        }).catch(() => {
        })
      }
    },
    linkToDetail(sku) {
      console.log('sku', sku)
      sku.orderId = this.order.orderId
      let value = JSON.stringify(sku)
      this.$pt.navigateTo({url: `/pages/personal/order/refund-detail/main?sku=${value}`})
    },
    linkToApply(sku) {
      sku.orderId = this.order.orderId
      let value = JSON.stringify(sku)
      this.$pt.navigateTo({url: `/pages/personal/order/refund-view/main?sku=${value}`})
    }
  }
}
</script>
<style lang="less" scoped>
.express-line{
  height: auto!important;
  max-height: 42px;
}
.add-height{
  height: auto!important;
  max-height: 42px;
}
.head-bar{
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.user-bar{
  background: white;
  .icon-box{
    margin-left: 50px;
  }
}
.copy-btn{
  font-size: 13px;
  border-radius: 3px;
  border: 1px solid #CACACA;
  padding: 3px 9px;
  line-height: 1;
  color: #333333;
  position: absolute;
  right: 0;
  top: 10px;
}
.address-copy{
  position: unset;
  right: unset;
  top: unset;
}
.line-2{
  // height: unset;
}
.color--0{
  background: #FF0000;
}
.color--1, .color--2, .color--20, .color--3, .color--4{
  background: #FF4E23;
}
// .color--2{
//   background: #0eaeff;
// }
// .color--3{
//   background: #04c160;
// }
// .color--4{
//   background: #04c160;
// }
.fontcolor--0{
  color: #FF0000;
}
.fontcolor--1{
  color: #FF4E23;
}
.fontcolor--2{
  color: #0eaeff;
}
.fontcolor--20{
  color: #0eaeff;
}
.fontcolor--3{
  color: #04c160;
}
.fontcolor--4{
  color: #04c160;
}
.color-total{
  color: #FF0000;
}
.main{
  background: white;
}
.line-h-1{
  line-height: 1;
}
.order-item{
  background: white;
  margin-top: 10px;
  padding-bottom: 10px;
}
.border-b{
  border-bottom: 1px solid #E9E9E9;
}
.color-r{
  color: #FF4E23;
}
.sku-block{
  margin-top: 15px;
  &:first-child{
    margin-top: 0;
  }
  .sku-row{
    border-radius: 4px;
    background: #F8F8F8;
    .sku-detail{
      .line-1{
        line-height: unset;
      }
    }
  }
}
.refund-status{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  &:last-child{
    .refund-btn{
      margin-bottom: 8px;
    }
    .refund-text{
      margin-bottom: 14px;
    }
  }
  .refund-btn{
    height: 28px;
    line-height: 28px;
    width: 70px;
    text-align: center;
    border-radius: 13.5px;
    border: 1px solid #E9E9E9;
    background: white;
    color: #666;
    font-size: 13px;
  }
  .refund-text{
    color: #EAA31B;
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.text-justify{
  text-align:justify;
  text-justify:distribute-all-lines;/*ie6-8*/
  text-align-last:justify;/* ie9*/
  -moz-text-align-last:justify;/*ff*/
  -webkit-text-align-last:justify;/*chrome 20+*/
  display: inline-block;
}
.goods-box{
  .goods-detail{
    border-bottom: 1px solid #e9e9e9;
    &:last-child{
      border-bottom: unset;
    }
  }
  .goods-prop{
    background: #e7e7e7;
    height: 20px;
    line-height: 20px;
  }
  .goods-title {
    font-size: 14px;
    height: unset;
    line-height: 1.4;
  }
}
.order-info{
  background: white;
  padding: 2px 15px 16px;
  line-height: 1;
}
.count-bar{
  background: white;
  .count-row{
    border-bottom: 1px solid #e9e9e9;
    line-height: 43px;
    &:last-child{
      border-bottom: unset;
    }
  }
}
.mark-bar{
  background: white;
  height: 115px;
}
.refund-color{
  color: #E6A23C;
}
.fixed-foot{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // height: 49px;
  background: white;
  text-align: right;
  .paystatus{
    display: flex;
    justify-content: right;
    align-items: center;
    .pay-btn{
      width: 143px;
      height: 49px;
      text-align: center;
      line-height: 49px;
      background: linear-gradient(to right, #FF9048, #FF4E23);
      color: white;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
.btnbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 49px;
  .btn{
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 17px;
    line-height: 1;
    margin-left: 20px;
  }
  &-default{
    background: white;
    color: #999999;
    border: 1px solid #B6B6B6;
  }
  &-pay{
    padding: 11px 18px !important;
    background: linear-gradient(to right, #FF9048, #FF4E23);
    color: white;
  }
}
.radius-5{
  border-radius: 5px;
}
</style>
